<template>
  <div class="warp">
    <div class="warp_auto">
      <div class="warp_top">
        <div class="jiansuo-box one1">
          <span class="span_top">电脑编号：</span>
          <el-input
            v-model="computerNumber"
            class="bed"
            clearable
            placeholder="请输入电脑编号"
          />
        </div>

        <div class="jiansuo-box two1">
          <span class="span_z">串口号：</span>
          <el-input
            v-model="comNumber"
            class="bed1"
            clearable
            placeholder="请输入串口号"
          />
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          class="btn_"
          @click="btn"
          >检索</el-button>
      </div>
      <el-table
        :data="arr"
        style="width: 100%"
        height="539"
        stripe
        :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column label="电脑编号" min-width="30%" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.computer_number }}</span>
          </template>
        </el-table-column>
        <el-table-column label="串口号" min-width="30%" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.com_number }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
            >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination
          :current-page="start"
          :page-size="PageSize"
          :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  comNumberQueryList,
} from "@/api/table";

export default {
  data() {
    return {
      arr: [],
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      computerNumber:"",//电脑号
      comNumber:"",//串口号
    };
  },
  created() {},
  mounted() {
    this.comNumberQueryList(this.PageSize, this.start);
  },
  methods: {
    //选择
    handleEdit(info) {
      console.log(info)
      // 弹窗打开
      this.$emit('selectComNumber',info)
    },
    // 搜索按钮
    btn() {
      this.start = 1;
      this.comNumberQueryList(this.PageSize, this.start);
    },
    //查询列表
    comNumberQueryList(PageSize, start) {
      comNumberQueryList({
        computerNumber: this.computerNumber,
        comNumber: this.comNumber,
        start: start,
        size: PageSize,
      }).then((res) => {
        this.arr = res.data;
        this.totalCount = res.totalCount;
      });
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.list(val, 1);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.start = val;
      // 切换页码时，要获取每页显示的条数
      this.comNumberQueryList(this.PageSize, this.start);
    },
  },
};
</script>
<style lang="scss" scoped>
.warp {
  width: 100%;
  height: 100%;
}
.warp_auto {
  width: 97%;
  height: 600px;
  margin: 0 auto;

  .warp_top {
    width: 100%;
    height: auto;
    margin-top: 2px;

    .jiansuo-box {
      display: inline-block;
      height: 77px;
      padding-top: 14px;
      box-sizing: border-box;
    }

    .one1 {
      width: 25%;
    }
    .two1 {
      width: 25%;
    }

    .three {
      width: 25%;
    }

    .span_top {
      position: relative;
      font-size: 15px;
      line-height: 50px;
    }
    .span_z {
      position: relative;
      font-size: 15px;
      left: 15px;
    }
    .span_statr {
      position: relative;
      left: 30px;
      font-size: 15px;
      line-height: 50px;
    }
    .bed {
      width: 200px;
      position: relative;
      left: 10px;
    }
    .bed1 {
      width: 200px;
      position: relative;
      left: 10px;
    }
    .zhuan {
      position: relative;
      left: 30px;
    }
    .btn_ {
      position: relative;
      left: 181px;
    }
    .newadd {
      width: 89px;
      height: 40px;
      color: #fff;
      line-height: 40px;
      cursor: pointer;
      text-align: center;
      position: relative;
      left: 190px;
      font-size: 15px;
      border-radius: 5px;
      display: inline-block;
      background: #19be6b;
    }
  }
  .department {
    position: relative;
  }
}

.paging {
  float: right;
  margin-top: 22px;
  margin-bottom: 30px;
}
.mod_box {
  margin-left: 28%;
  width: 60%;
}
.mod_box1 {
  margin-left: 28%;
  width: 44%;
}
.adda {
  width: auto;
  height: 51px;
}
.tablescope1 {
  position: relative !important;
  left: -37px !important;

  ::v-deep .el-switch__label--left {
    position: relative;
    left: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__core {
    width: 58px !important;
  }
  ::v-deep .el-switch__label--right {
    position: relative;
    right: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  ::v-deep .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}
.tablescope {
  ::v-deep .el-switch__label--left {
    position: relative;
    left: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__core {
    width: 58px !important;
  }
  ::v-deep .el-switch__label--right {
    position: relative;
    right: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  ::v-deep .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
  .warp_auto {
    width: 96%;
    height: 600px;
    margin: 0 auto;

    .warp_top {
      width: 100%;
      height: auto;
      margin-top: 2px;

      .jiansuo-box {
        display: inline-block;
        height: 77px;
        padding-top: 14px;
        box-sizing: border-box;
      }

      .one1 {
        width: 26%;
      }
      .two1 {
        width: 25%;
      }
      .three {
        width: 24%;
      }

      .span_z {
        position: relative;
        font-size: 15px;
        left: 4%;
      }
      .span_statr {
        position: relative;
        left: 7%;
        font-size: 15px;
        line-height: 50px;
      }

      .bed {
        width: 58%;
        position: relative;
        left: 0%;
      }
      .bed1 {
        width: 64%;
        position: relative;
        left: 5%;
      }

      .zhuan {
        position: relative;
        left: 8%;
        width: 52%;
      }

      .btn_ {
        position: relative;
        left: 9%;
      }

      .newadd {
        width: 89px;
        height: 40px;
        color: #fff;
        line-height: 40px;
        cursor: pointer;
        text-align: center;
        position: relative;
        left: 12% !important;
        font-size: 15px;
        border-radius: 5px;
        display: inline-block;
        background: #19be6b;
      }
    }

    .mod_box {
      margin-left: 20%;
      width: 66%;
    }
  }
  .mod_box1 {
    margin-left: 20%;
    width: 66%;
  }
}
@media screen and (min-width: 1366px) and (max-width: 1600px) {
  .warp_auto .mod_box {
    margin-left: 20%;
    width: 60%;
  }

  .mod_box1 {
    margin-left: 20%;
    width: 60%;
  }
}
@media screen and (min-width: 1800px) {
  .warp_auto {
    width: 97%;
    height: 600px;
    margin: 0 auto;

    .warp_top {
      width: 100%;
      height: auto;
      margin-top: 2px;

      .jiansuo-box {
        display: inline-block;
        height: 77px;
        padding-top: 14px;
        box-sizing: border-box;
      }

      .one1 {
        width: 25%;
      }
      .two1 {
        width: 25%;
      }

      .three {
        width: 25%;
      }

      .span_z {
        position: relative;
        font-size: 15px;
        left: 4%;
      }
      .span_statr {
        position: relative;
        left: 7%;
        font-size: 15px;
        line-height: 50px;
      }

      .bed {
        width: 60%;
        position: relative;
        left: 2%;
      }
      .bed1 {
        width: 60%;
        position: relative;
        left: 5%;
      }

      .zhuan {
        position: relative;
        left: 8%;
        width: 60%;
      }

      .btn_ {
        position: relative;
        left: 10%;
      }

      .newadd {
        width: 89px;
        height: 40px;
        color: #fff;
        line-height: 40px;
        cursor: pointer;
        text-align: center;
        position: relative;
        left: 12% !important;
        font-size: 15px;
        border-radius: 5px;
        display: inline-block;
        background: #19be6b;
      }
    }
    .mod_box {
      margin-left: 28%;
      width: 44%;
    }
  }
  .mod_box1 {
    margin-left: 28%;
    width: 44%;
  }
}
</style>
